<script setup>
import { inject } from 'vue';
import { DoubleLeftOutlined, DoubleRightOutlined, PoweroffOutlined, DownloadOutlined, SaveOutlined } from '@ant-design/icons-vue';
import router from '@/router/index.js';
import { KbdHTML } from '@/views/obj-detn/kbd-modal.js';
import { SerialNumClassName } from '../pkg-state.js';
import JudgeModal from './judge-modal.vue';
import CommentModal from './comment-modal.vue';
import SerialNum from '@/components/data-label/serial-num.vue';
import { NextPkgId, PkgListReadOf, PrevPkgId } from '@/util/index.js';
import * as storage from '@/util/storage.js';
import { exportFile } from '../libs/utils.js';
import { assignId } from '../common.js';

const QuesData = inject('QuesData');
const shortcutKeyTable = $config.objDetn.shortcutKeyTable;
const taskInfo = inject('taskInfo');
const props = inject('props');
const searchParams = inject('searchParams');
const quesTotal = inject('quesTotal');
const saveFile = inject('saveFile');
const ques = inject('ques');
const comments = inject('comments');
const quesList = inject('quesList');
const quesIndex = inject('quesIndex');
const quesSwitchable = inject('quesSwitchable');
const judge = inject('judge');
const judgePassQues = inject('judgePassQues');
const judgePassPkg = inject('judgePassPkg');
const kbdModalProps = inject('kbdModalProps');
const OpGte = inject('OpGte');
const handleReject = inject('handleReject');

const useJudgeModal = inject('useJudgeModal');
const judgeModalProps = inject('judgeModalProps');
const commentModalProps = inject('commentModalProps');

const delComment = inject('delComment');

const initApp = inject('initApp');
const switchPkgAbleToPrev = inject('switchPkgAbleToPrev');
const switchPkgAbleToNext = inject('switchPkgAbleToNext');
const pkgInfoInStorage = inject('pkgInfoInStorage');

function handleBack() {
  saveFile(ques.value)
  .finally(() => {
    router.push({ path: '/task-detail', query: { id: taskInfo.value.id } });
  })
}

const toGoalPkgOf = f => {
  const goalPkgId = R.compose( f, PkgListReadOf, R.prop('user'), storage.readAsObj )('pkgInfo');
  Object.assign(pkgInfoInStorage.value, { pkg: goalPkgId });
  initApp(pkgInfoInStorage.value);
}

function exportJSON() {
  const data = QuesData(ques.value);
  exportFile(data.annotation.video.filename + '.json', new Blob([JSON.stringify(data)]), { mimeType: 'text/plain' })
}
</script>

<template>
  <header>
    <!-- operate history -->

    <div class="top-left">
      <a-button title="返回任务详情" type="danger" ghost @click="() => handleBack()">
        <template #icon><poweroff-outlined /></template>
        退出
      </a-button>
  
      <!-- <a-button title="快捷键" type="primary" ghost @click="() => (kbdModalProps.visible = true)">
        <template #icon><laptop-outlined /></template>
        快捷键
      </a-button> -->

      <a-button title="导出" @click="() => exportJSON()">
        <template #icon><download-outlined /></template>
        导出
      </a-button>

      <template v-if="OpGte('标注')">
        <a-button
          v-exist:task="'保存'"
          type="primary"
          title="保存"
          @click="() => saveFile(ques)">
          <template #icon><save-outlined /></template>
          保存
        </a-button>
      </template>
    </div>

    
    <serial-num
      :value="quesIndex"
      :max="quesList.length"
      :switchable="quesSwitchable"
      :className="ques?.auditStatus && SerialNumClassName(ques.auditStatus)"
      @change="v => quesIndex = v"
    >
      <template #extraLeft>
        <template v-if="'search' == props.mode">
          <a-button
            :disabled="!(1 < searchParams.start)"
            title="上一页"
            @click="() => (--searchParams.start)"
          >
            <template #icon><double-left-outlined /></template>
          </a-button>
        </template>
        <template v-else>
          <a-button
            :disabled="!switchPkgAbleToPrev"
            title="上一包"
            @click="() => toGoalPkgOf(PrevPkgId)"
          >
            <template #icon><double-left-outlined /></template>
          </a-button>
        </template>
      </template>
      <template #extraRight>
        <template v-if="'search' == props.mode">
          <a-button
            :disabled="!(searchParams.start < Math.ceil(quesTotal / 10))"
            title="下一页"
            @click="() => (++searchParams.start)"
          >
            <template #icon><double-right-outlined /></template>
          </a-button>
        </template>
        <template v-else>
          <a-button
            :disabled="!switchPkgAbleToNext"
            title="下一包"
            @click="() => toGoalPkgOf(NextPkgId)"
          >
            <template #icon><double-right-outlined /></template>
          </a-button>
        </template>
      </template>
    </serial-num>

    <div class="top-right">
      <template v-if="OpGte('审核')">
        <div class="judge">
          <a-button
            v-exist:task="'通过'"
            title="通过"
            @click="() => judgePassQues()">
            <template #icon>
              <span role="img" class="anticon">
                <svg t="1684295278493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26251" width="20" height="16"><path d="M918.64 238.64l-544 544C368.4 788.88 360.16 792 352 792s-16.4-3.12-22.64-9.36l-224-224a32.064 32.064 0 0 1 0-45.28 32.064 32.064 0 0 1 45.28 0L352 714.72l521.36-521.36c12.48-12.48 32.8-12.48 45.28 0s12.48 32.8 0 45.28z" p-id="26252"></path></svg>
              </span>
            </template>
          </a-button>
  
          <a-button
            v-exist:task="'驳回'"
            title="驳回"
            @click="() => handleReject()">
            <template #icon>
              <span role="img" class="anticon">
                <svg t="1684295042419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24342" width="20" height="16"><path d="M811.974537 862.529445c-13.094226 0-26.187429-4.994758-36.177967-14.985296l-600.670505-600.623433c-19.9821-19.980054-19.983123-52.376904-0.00307-72.357981 19.980054-19.9821 52.377928-19.983123 72.357981-0.00307l600.670505 600.623433c19.9821 19.980054 19.983123 52.376904 0.00307 72.357981C838.164013 857.532641 825.06774 862.529445 811.974537 862.529445z" p-id="24343"></path><path d="M211.303009 862.529445c-13.096273 0-26.189476-4.995781-36.180014-14.987343-19.980054-19.981077-19.97903-52.377928 0.00307-72.357981l600.670505-600.623433c19.981077-19.980054 52.378951-19.978007 72.357981 0.00307 19.980054 19.981077 19.97903 52.377928-0.00307 72.357981l-600.670505 600.623433C237.491461 857.533664 224.396211 862.529445 211.303009 862.529445z" p-id="24344"></path></svg>
              </span>
            </template>
          </a-button>
  
          <a-button
            v-exist:task="'整包通过'"
            title="整包通过"
            @click="() => judgePassPkg()">
            <template #icon>
              <span role="img" class="anticon">
                <svg t="1684294726756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14351" width="20" height="16"><path d="M303.313 839.094h-119.25c-41.738 0-59.625-26.888-59.625-59.625V183.5c0-52.875 10.237-59.625 59.624-59.625h476.832c46.125 0 60.469 15.469 60.469 59.625v80.044c0 41.625 59.625 46.969 59.625 0v-79.875c0-87.863-28.407-119.194-120.207-119.194H183.894c-58.163 0-118.913 7.144-118.913 116.775V799.1a113.485 113.485 0 0 0 4.95 34.763 93.825 93.825 0 0 0 91.856 65.08c72.957 0.282 102.544 0 141.638 0 39.094 0 36.337-59.793-0.169-59.793z" p-id="14352"></path><path d="M244.025 242.844c-42.806 0-44.719 60.412 0 60.412h357.637c40.95 0 47.475-60.356 0-60.412H244.026z m96.019 178.706h-96.019c-42.806 0-44.719 60.412 0 60.412h96.019c40.95 0 47.475-60.356 0-60.412zM660.894 363.219A298.012 298.012 0 1 0 958.962 661.23c0.057-166.837-137.08-298.012-298.068-298.012z m0 536.456a238.444 238.444 0 1 1 238.443-238.444A239.231 239.231 0 0 1 660.894 899.9v-0.225z" p-id="14353"></path><path d="M765.237 557l-146.08 146.138-62.607-62.607c-5.963-11.925-29.813-11.925-41.737 0a28.8 28.8 0 0 0 0 41.738l83.53 83.475a28.8 28.8 0 0 0 41.738 0l166.894-166.95a29.531 29.531 0 0 0-41.681-41.738h-0.056z" p-id="14354"></path></svg>
              </span>
            </template>
          </a-button>  
  
          <a-button
            v-exist:task="'整包驳回'"
            title="整包驳回"
            @click="() => useJudgeModal({ all: true })">
            <template #icon>
              <span role="img" class="anticon">
                <svg t="1684294894859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17609" width="20" height="16"><path d="M319.255273 909.730909a34.909091 34.909091 0 0 1-34.909091 34.909091H174.266182a127.767273 127.767273 0 0 1-127.627637-127.627636V175.662545a127.720727 127.720727 0 0 1 127.627637-127.58109h502.225454a127.720727 127.720727 0 0 1 127.627637 127.58109v81.128728a34.909091 34.909091 0 0 1-69.818182 0V175.662545c0-31.883636-25.925818-57.762909-57.809455-57.762909H174.266182c-31.883636 0-57.809455 25.925818-57.809455 57.762909v641.303273c0 31.883636 25.925818 57.809455 57.809455 57.809455H284.392727a35.002182 35.002182 0 0 1 34.862546 34.955636zM239.941818 243.2a34.909091 34.909091 0 0 0 0 69.818182h378.600727a34.909091 34.909091 0 0 0 0-69.818182H239.941818z m65.675637 193.163636H239.941818a34.909091 34.909091 0 0 0 0 69.818182h65.675637a34.909091 34.909091 0 0 0 0-69.818182z m583.586909 451.211637c-56.925091 56.971636-132.654545 88.250182-213.178182 88.250182s-156.206545-31.325091-213.178182-88.250182a301.940364 301.940364 0 0 1 0-426.356364c56.971636-56.971636 132.608-88.250182 213.178182-88.250182s156.253091 31.325091 213.178182 88.250182c117.527273 117.620364 117.527273 308.875636 0 426.356364z m-49.384728-376.971637c-43.706182-43.706182-101.888-67.816727-163.84-67.816727s-120.087273 24.110545-163.793454 67.816727a232.029091 232.029091 0 0 0 0 327.633455c43.706182 43.706182 101.888 67.816727 163.793454 67.816727s120.087273-24.110545 163.84-67.816727a231.889455 231.889455 0 0 0 0-327.633455z m-44.916363 44.916364a34.909091 34.909091 0 0 0-49.384728 0l-69.538909 69.538909-69.538909-69.538909a34.909091 34.909091 0 1 0-49.384727 49.384727l69.538909 69.585455-69.538909 69.538909a34.909091 34.909091 0 0 0 49.338182 49.384727l69.538909-69.538909 69.538909 69.538909a34.862545 34.862545 0 1 0 49.338182-49.384727l-69.538909-69.538909 69.538909-69.585455a34.816 34.816 0 0 0 0.093091-49.384727z" p-id="17610"></path></svg>
              </span>
            </template>
          </a-button>
        </div>
      </template>
    </div>
  </header>

  <judge-modal
    v-if="judgeModalProps.visible"
    v-model:visible="judgeModalProps.visible"
    :all="judgeModalProps.all"
    :on-judge="judge"
  >
  </judge-modal>

  <comment-modal
    v-if="commentModalProps.visible"
    v-model:visible="commentModalProps.visible"
    :comments="comments"
    @ok="assignId"
    @cancel="delComment"
  >
  </comment-modal>

  <a-modal
    class="kbdshortcut"
    v-if="kbdModalProps.visible"
    v-model:visible="kbdModalProps.visible"
    title="快捷键"
    centered
    :width="1000"
    :footer="null">
    <ul>
      <template v-for="item in shortcutKeyTable">
        <li>
          <span v-html="KbdHTML(item.key)"></span>
          <span>{{ item.fn }}</span>
          <span>{{ item.when ?? '' }}</span>
        </li>
      </template>
    </ul>
  </a-modal>
</template>

<style>
.base-label .ant-spin-container > header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding-left: 12px;
  padding-right: 12px;
  background: #fff;
  box-shadow: 0 1px 8px -4px rgba(0,0,0,.3);
}

.base-label .ant-spin-container > header > div { flex: 1; }

.base-label .ant-spin-container > header .ant-btn:disabled {
  color: rgba(0,0,0,.25);
  cursor: not-allowed;
}

.base-label .ant-spin-container > header .ant-input-number input { text-align: center; }

.kbdshortcut .ant-modal-header {
  padding-left: 16px;
  padding-right: 16px;
}

.kbdshortcut .ant-modal-body { padding: 12px; }
.kbdshortcut ul {
  overflow-y: auto;
  height: 252px;
}
.kbdshortcut li { display: flex; }
.kbdshortcut li:nth-child(even) { background-color: rgba(230,236,243,.34); }

.kbdshortcut li span { padding: .5em; }
.kbdshortcut li span:first-child { width: 11em; }
.kbdshortcut li span:nth-child(2) { flex: 1; }
.kbdshortcut li span:nth-child(3) { width: 13em; }

.kbdshortcut kbd {
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid #b4b4b4;
  font-size: 0.85em;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  color: #333;
  background-color: #eee;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
}

.base-label .top-left {
  display: flex;
  gap: 1em;
}

.base-label .top-right {
  display: flex;
  justify-content: end;
}

.base-label .judge {
  display: flex;
  gap: .75em;
  margin-right: .75em;
}

.base-label .judge > .ant-btn {
  width: 26px;
  height: 26px;
  border-color: #333;
  border-radius: 4px;
}

.base-label .judge > .ant-btn:hover { border-color: unset; }
.base-label .judge > .ant-btn svg { fill: currentColor; }
</style>
